<template>
  <view class="bd">
    <view class="topArea flex bd1">
      <view class="flex flex-al-c bd1">
        <image
          src="../../../static/img/child-plan.png"
          mode="aspectFit"
          style="width: 50upx; height: 50upx"
        >
        </image>
        <view style="font-size: 38upx">产检全检计划</view>
      </view>
      <view style="height: 40upx"></view>
      <view style="font-size: 22upx"> 当前所在社区：{{ sq }} </view>
    </view>
    <view class="c-list t1">
      <view
        class="c-item uni-item-line"
        style="padding: 30upx 30upx 20upx 40upx"
        v-for="(v, index) in list"
        :key="index"
        @click="goDetail(v)"
      >
        <view class="flex flex-j-b">
          <view
            style="font-size: 34upx; font-weight: 900; color: #444"
            class="t1"
            >{{ v.planName }}</view
          >
          <view class="flex">
            <view>
              <!-- v.checkType  0 1未完成  2已完成 -->
              <u-tag
                text="未完成"
                v-show="v.checkType == 0 || v.checkType == 1"
                border-color="#F68E3A"
                type="error"
                style="
                  background-color: #f68e3a;
                  color: #fff;
                  margin-right: 20upx;
                "
              />
              <u-tag
                text="已完成"
                v-show="v.checkType == 2"
                border-color="#18C7E1"
                type="error"
                style="
                  background-color: #18c7e1;
                  color: #fff;
                  margin-right: 20upx;
                "
              />
            </view>
            <view>
              <!-- v.checkType  0 1未完成  2已完成 -->
              <u-tag
                text="未上传"
                v-show="v.isUpload != 1"
                border-color="#F68E3A"
                type="error"
                style="
                  background-color: #f68e3a;
                  color: #fff;
                  margin-right: 20upx;
                "
              />
              <u-tag
                text="已上传"
                v-show="v.isUpload == 1"
                border-color="#18C7E1"
                type="error"
                style="
                  background-color: #18c7e1;
                  color: #fff;
                  margin-right: 20upx;
                "
              />
            </view>

            <view
              class="iconfont iconarrow-right"
              style="font-size: 40upx; color: #c3c3c3"
            ></view>
          </view>
        </view>
        <view class="uni-item-line" style="padding: 20upx 0">{{
          v.planTime
        }}</view>
        <view style="margin-top: 20upx; color: #888" v-html="v.planGoal">
          {{ v.planGoal }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: {},
      list: [],
      sq: "",
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getAllPlanMore(this.page.pageNum + 1);
  },
  onShow() {
    uni.onThemeChange(function (res) {
      var style = res.style;
      this.ptcolor(style);
    });
    this.getAllPlan();
    this.shequ();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    ptcolor(style) {
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
        uni.setBackgroundTextStyle({
          textStyle: "dark",
        });
        uni.setBackgroundColor({
          backgroundColor: "#1B1C1E",
          backgroundColorTop: "#1B1C1E",
          backgroundColorBottom: "#1B1C1E",
        });
      } else {
        console.log("当前为普通模式");
        uni.setTabBarStyle({
          backgroundColor: "#fff",
        });
      }
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      this.ptcolor(style);
    },
    // 获取接种计划
    getAllPlan(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/gravid/planGravidPrenatalCheck/getPlanGravidPrenatalCheck", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = res.data.data.list;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getAllPlanMore(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/gravid/planGravidPrenatalCheck/getPlanGravidPrenatalCheck", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = self.list.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 详情
    goDetail(v) {
      uni.navigateTo({
        url: "/pages/main/pregnant/inspection-plan-detail?id=" + v.id,
      });
    },

    //获取社区
    shequ() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/common/getUserInfo/getDeptInfo", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },

    getPlanss() {
      uni.redirectTo({
        url: "/pages/main/pregnant/backlog",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.topArea {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #18c7e1;
  color: #fff;
  flex-direction: column;
  align-items: center;
  padding: 40upx 0;
}
.c-list {
  padding-top: 200rpx;
}
.item {
  margin: 20upx;
  padding: 20upx;
  background-color: #fff;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  page {
    background-color: #1b1c1e;
  }
  .bd {
    background-color: #1b1c1e !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .t1 {
    color: #ccc !important;
  }

  >>> span {
    color: #ccc !important;
  }
}
@media (prefers-color-scheme: light) {
  page {
    background-color: #f7f7f7;
  }
}
</style>
